<template>
  <el-card body-style="min-height: 86vh " class="zoomable">
    <!-- 搜索 -->
    <el-form :model="searchForm">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="车牌号" label-width="80">
            <el-input
              size="large"
              style="width: 400px"
              v-model="searchForm.licensePlate"
              placeholder="请输入车牌号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆类别" label-width="80">
            <el-select
              v-model="searchForm.carCategory"
              placeholder="请选择车辆类别"
              style="width: 400px"
              size="large"
            >
              <el-option
                v-for="dict in carCategoryList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆状态" label-width="80">
            <el-select
              v-model="searchForm.businessStatus"
              placeholder="请选择车辆状态"
              style="width: 400px"
              size="large"
            >
              <el-option
                v-for="dict in carStatusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归属企业" label-width="80">
            <el-input
              size="large"
              style="width: 400px"
              v-model="searchForm.companyName"
              placeholder="请输入归属企业"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button size="large" @click="handleRestSearch()">重置</el-button>
            <el-button size="large" type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div><el-button type="primary" @click="handleAddRecord">新增车辆</el-button></div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="licensePlate" label="车牌号码" width="120" align="center" />
      <!--// 1客运车辆 2普货车辆 3危货车辆 4公交车辆 5巡游出租车辆 6网约出租车辆 7教练车辆  -->
      <el-table-column prop="carCategory" label="车辆类别" width="120" align="center">
        <template #default="scope">
          <span>{{
            carCategoryList.find((item) => item.value === scope.row.carCategory)?.label
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="carType" label="车辆类型" width="180" align="center">
        <template #default="scope">
          <span v-if="scope.row.carCategory == 1">{{
            carCategoryList
              .find((item) => item.value === scope.row.carCategory)
              ?.options.find((item) => item.value === scope.row.carType)?.label
          }}</span>
          <span v-else> </span>
        </template>
      </el-table-column>
      <el-table-column prop="businessStatus" label="车辆状态" width="120" align="center">
        <template #default="scope">
          <span>{{
            carStatusList.find((item) => item.value === scope.row.businessStatus)?.label
          }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="companyName" label="企业名称" width="180" align="center" />
      <el-table-column prop="updateTime" label="更新时间" width="120" align="center" />
      <el-table-column prop="brandType" label="许可证号" width="180" align="center" />
      <el-table-column prop="roadTransportId" label="道路运输证" width="180" align="center" />
      <el-table-column prop="validDateStart" label="有效期起" width="180" align="center" />
      <el-table-column prop="validDateEnd" label="有效期止" width="180" align="center" />
      <el-table-column label="操作" width="240" align="center" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" class="mx-0" @click="handleViewRecord(row)">查看</el-button>
          <el-button type="primary" class="mx-0" @click="handleEditRecord(row)">编辑</el-button>
          <!-- 泡泡弹层 -->
          <el-popconfirm title="你确定要删除该车辆信息?" @confirm="handleDelete({ id: row.id })">
            <template #reference>
              <el-button type="danger" class="mx-0">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <!-- 新增 -->
    <add-record ref="addRecordRef" @refresh="handleGetTableList" />
    <!-- 预检 -->
    <preliminary-record ref="preliminaryRecordRef" />
    <!-- 查看 -->
    <view-record ref="viewRecordRef" />
    <!-- 编辑 -->
    <edit-record ref="editRecordRef" @refresh="handleGetTableList" />
  </el-card>
</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";
import { useInitTable } from "@/hooks/useCommon";
import { getAnnualReviewCar } from "@/api/annualAudit";
import { carCategoryList, carStatusList } from "@/enum/index";
import { delAnnualVehicle } from "@/api/annualAudit";

const AddRecord = defineAsyncComponent(() => import("./components/car/addRecord.vue"));
const PreliminaryRecord = defineAsyncComponent(() => import("./components/preliminaryRecord.vue"));
const ViewRecord = defineAsyncComponent(() => import("./components/car/viewRecord.vue"));
const EditRecord = defineAsyncComponent(() => import("./components/car/editRecord.vue"));
const {
  tableData,
  searchForm,
  currentPage,
  limit,
  total,
  handleGetTableList,
  handleRestSearch,
  // handleDelete是 useInitTable返回的进行删除操作的方法，当调用 handleDelete的时候，会调用 deleteData指定的方法进行删除
  handleDelete
} = useInitTable({
  isNotRefresh: true,
  searchForm: {
    certificateNo: "",
    licensePlate: "",
    carCategory: "",
    businessStatus: "",
    companyName: ""
  },
  getTableList: getAnnualReviewCar,
  // 通过 deleteData 告知删除操作要调用的方法是什么
  deleteData: delAnnualVehicle
});

handleGetTableList();
// 新增记录
const addRecordRef = ref();
const handleAddRecord = () => {
  addRecordRef.value.handleCreate();
};

// 查看
const viewRecordRef = ref();
const handleViewRecord = (val: any) => {
  // viewRecordRef.value.form.value = val;
  viewRecordRef.value.handleEdit(val);
};
// 编辑
const editRecordRef = ref();
const handleEditRecord = (val: any) => {
  editRecordRef.value.handleEdit(val);
};
//删除 delAnnualVehicle
// const delAnnualVehicle = (val: any) => {
// };
</script>
<style scoped lang="scss">
:deep(.el-button) {
  margin: 0 10px 10px 0;
}
</style>
